<script setup>
import {ref, onMounted} from 'vue'
import FirstPage from "@/views/Reader/components/firstPage.vue";
import {useRouter, useRoute} from 'vue-router'
import AsideBar from "@/views/Reader/components/asideBar/asideBar.vue";
import {useScroll} from '@vueuse/core'
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue'

const {y} = useScroll(window)

const bodyText = ref('两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' +
    '“差头,人到了!”\n' +
    '顾思年心头微紧,因为门口的地面上赫然有一滩血迹。\n' +
    '牢房内传来了一道冰冷的喝声:\n' +
    '“那还磨蹭什么,带进来!”\n' +
    '刑房内的景象可算是把顾思年吓了一跳,从水火棍到烙铁、从小匕首到铡刀,应有尽有,贴着墙角边的木架足\n' +
    '足摆了一整排,和他在电视剧里看到的一模一样。\n' +
    '门上。\n' +
    '还有一男子斜靠在椅子上,翘着二郎腿,正把玩着一把短小的匕首。\n' +
    '在他身侧的火盆噼里啪啦的烧着炭火,里面的铁钳被烧的通红,冒着黑烟,待会儿那玩意就会烫在顾思年的脑\n' +
    '从小就在和平盛世长大的顾思年哪里见过这种场面,一进牢房就觉得双腿直打颤。\n' +
    '满脸狠辣的小差头冷冷的盯着顾思年:\n' +
    '“你就是京城发配来的王府书童?”\n' +
    '顾思年小心翼翼的点了点头:\n' +
    '“是。”\n' +
    '见顾思年一点也没有掏银子的意思,小差头瞬间变了脸,破口大骂:\n' +
    '“直娘贼!')

const chapter = ref(1)
const router = useRouter()
const route = useRoute()
const emit = defineEmits('updateIsDay')
const isDay = ref()
const getIsDay = (value) => {
  console.log(value.value)
  isDay.value = value.value
}
</script>

<template>
  <div class="mainn">
    <div class="left">
      <div v-if="route.params.chapterID === '1'" class="firstPage">
        <FirstPage></FirstPage>
      </div>
      <div v-if="isDay === true">
        <div class="content">
          <div class="title">
            <div class="nameTitle">
              <p class="nameTitle">第二章体内冤魂</p>
            </div>
            <div class="informationTitle">
              <div class="authorInformation">
                <p class="word">作者:</p>
                <p>风尘落雨</p>
              </div>
              <div class="wordInformation">
                <p class="word">本章字数:</p>
                <p>54686</p>
              </div>
              <div class="updateTime">
                <p class="word">更新时间:</p>
                <p>2024-01-01 01:01:01</p>
              </div>
            </div>
          </div>
          <div>
            <el-divider></el-divider>
          </div>
          <div class="body">
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:svnjdskjvndskbdfibndfjbndkjbvdfkjbdkjbdfbvdfbbn'
              + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
            <p class="bodyText">两位狱卒夹着顾思年一路往深处走,最后停在了一间牢房门口喊道:\n' + '“差头,人到了!</p>
          </div>
          <div>
            <el-divider></el-divider>
          </div>
          <div class="button">
            <el-button type="danger" round size="large">捧场</el-button>
          </div>
          <div class="code">
            <i class="iconfont icon-erweima"></i>
            <p style="margin-bottom: 20px">扫一扫，手机接着读</p>
          </div>
        </div>
        <div class="button-group">
          <el-button-group>
            <el-button type="default" :icon="ArrowLeft" style="border: none;">上一章</el-button>
            <el-button type="default" style="border: none;">
              下一章
              <el-icon class="el-icon--right">
                <ArrowRight/>
              </el-icon>
            </el-button>
          </el-button-group>
          <el-button-group class="ml-4">
            <el-button type="default" :icon="Edit" style="border: none;"/>
            <el-button type="default" :icon="Share" style="border: none;"/>
          </el-button-group>
        </div>
      </div>
    </div>
    <div class="asideBar">
      <aside-bar @updateIsDay="getIsDay"></aside-bar>
    </div>
  </div>

</template>

<style scoped>
.mainn {
  display: flex;
  flex-direction: row;
//align-items: center; //justify-content: center;
}

.left {

}

.firstPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 200px 10px 200px;
  background-color: white;
  border-radius: 5px; /* 可选，圆角 */
  height: auto;
}

.content {
  background-color: white;
  border-radius: 5px;
  margin-right: 200px;
  margin-left: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nameTitle {
  font-size: 30px;
  font-weight: normal;
  margin: 20px 10px 20px 10px;
}

.informationTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 5px; /* 可选，圆角 */
}

.authorInformation {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  border-radius: 5px; /* 可选，圆角 */
}

.wordInformation {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-left: 150px;
  margin-right: 150px;
}

.updateTime {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.word {
  opacity: 0.5;
}

.asideBar {
  position: sticky;
  top: 80px;
  right: 0;
  width: auto;
  height: auto;
  background-color: #f0f0f0;
  z-index: 1000;
}

.body {
  margin-left: 100px;
  margin-right: 100px;
}

.bodyText {
  font-size: 20px;
  font-weight: normal;
  line-height: 30px;
  letter-spacing: 2px;
  margin: 10px 0 10px 0;
}

.button {
  margin: 10px;
}

.button-group {
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.code {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
}
</style>